<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>帮我选卡</title>

    <!-- styles here -->
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="../css/Public_CSS.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" href="../css/swiper.min.css">
</head>

<body>

    <div class="pick-result" id="app">
        <div class="banner-back">
            <span onclick="window.history.back()">
                <i>返回</i>
            </span>帮我选卡
        </div>
        <div class="pick-title">
            <h1>已根据您的需求为您匹配</h1>
        </div>
        <div class="repick">
            <a @click="reset" class="btn">重新匹配</a>
        </div>
        <div class="swiper-container scroll-y">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="card in cards">
                    <div class="chart">
                        <p class="property" v-for="(item,index) in card.tags" v-if="index < 5" v-html="item.tagName"></p>
                        <div class="circle">
                            <p>匹配度</p>
                            <p v-html="card.match + '%'"></p>
                        </div>
                    </div>
                    <div class="cards bg-block">
                        <img :src="card.cardImage" alt="信用卡">
                        <div class="introduction">
                            <h1 v-html="card.cardName"></h1>
                            <p>
                                <span v-for="(item,index) in card.tags" v-if="index<3" v-html="item.tagName"></span>
                            </p>
                            <strong v-html="card.cardDesc"></strong>
                        </div>
                        <div class="next">
                            <a :href="card.cardUrl" class="btn btn-red" style="margin-top: 10px">马上申请</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <!-- scripts here -->
    <script type="text/javascript" src="../js/main.js"></script>
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../js/swiper.jquery.min.js"></script>
    <script src="../js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../public/js/loan/mui.min.js"></script>
    <script>
        $(function () {
            vm.loadData();
            var swiper2 = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                observer: true, //修改swiper自己或子元素时，自动初始化swiper
                observeParents: true //修改swiper的父元素时，自动初始化swiper
            });
        });
        var vm = new Vue({
            el: '#app',
            data: {
                datas: {
                    appId: '',
                    tags: []
                },
                cards: [{
                    tags: []
                }],
            },
            methods: {
                reset: function () {
                    sessionStorage.setItem("tags1", []);
                    sessionStorage.setItem("tags2", []);
                    sessionStorage.setItem("tags3", []);
                    window.location.href = "smart-select.html";
                },
                loadData: function () {
                    vm.datas.appId = appId();
                    var tags1 = sessionStorage.getItem("tags1");
                    var tags2 = sessionStorage.getItem("tags2");
                    var tags3 = sessionStorage.getItem("tags3");
                    if (tags1 != null && tags1 != undefined) {
                        tags1 = tags1.split(",");
                    }
                    if (tags2 != null && tags2 != undefined) {
                        tags2 = tags2.split(",");
                    }
                    if (tags3 != null && tags3 != undefined) {
                        tags3 = tags3.split(",");
                    }
                    tags1.push.apply(tags1, tags2);
                    tags1.push.apply(tags1, tags3);
                    vm.datas.tags = tags1;
                    $.ajax({
                        url: "/thmlfApi/avs/yb/matchCard",
                        type: "POST",
                        contentType: "application/json",
                        data: JSON.stringify(vm.datas),
                        success: function (r) {
                            if (r.code == 200) {
                                console.log("data", r.result);
                                vm.cards = r.result;
                            } else {
                                alert(r.message);
                            }
                        },
                        complete: function () {

                        },
                        error: function (e) {
                            console.error("request error", e);
                            mui.alert("请求失败，请稍后重试");
                        }
                    });
                }
            }
        });
    </script>

</body>

</html>